<template>
  <el-dialog
    v-model="visible"
    width="600px"
    title="退回"
    destroy-on-close
    @close="close"
    class="has-border-dialog"
    modal-class="dialogZIndex"
  >
    <el-form ref="formRef" :model="formValue">
      <el-form-item prop="remark">
        <el-input
          v-model="formValue.msg"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          maxlength="255"
          show-word-limit
          placeholder="退回意见"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="process"> 提交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { useMessage } from '@/hooks'
import { FormInstance } from 'element-plus'
import { handlerBack } from '@/api/spotCheck/spotCheck'
import { useRouter } from 'vue-router'
const router = useRouter()
const emits = defineEmits(['reload'])

const { message } = useMessage()

const visible = ref(false)

const formValue = ref({
  msg: '',
  taskId: ''
})

const formRef = ref<FormInstance>()

const loading = ref(false)

const process = () => {
  if (loading.value) return
  const data = {
    ...formValue.value
  }
  console.log('files', data)
  loading.value = true
  handlerBack(data)
    .then((res) => {
      close()
      router.go(-1)
      emits('reload')
    })
    .finally(() => {
      loading.value = false
    })
}

const close = () => {
  formRef.value?.resetFields()
  fileData.value = []
  visible.value = false
}

const mfileList = ref()
const fileData = ref<any[]>([])
const previewHandler: any = (file: any[]) => {
  console.log('file', file)
  fileData.value = [file]
  mfileList.value.detailsVisible = true
}

const show = (id) => {
  formValue.value.taskId = id
  formRef.value?.resetFields()
  visible.value = true
}

defineExpose({
  show
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  border-top: 2px solid #f8f8f8;
  border-bottom: 2px solid #f8f8f8;
}

:deep(.el-upload-list--picture-card) {
  --el-upload-list-picture-card-size: 100px;
}

:deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: 100px;
}

.selectPeople {
  display: inline-block;
  padding: 0 10px;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  cursor: pointer;
}
.dialogZIndex {
  z-index: 100 !important;
}
</style>
<style>
.viewer-container {
  z-index: 9999 !important;
}
</style>
